  // 变量定义
  $transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  $border-radius: 0.375rem;
  $spacing-sm: 0.5rem;
  $spacing-md: 1rem;

  .c-grid-layout {
    width: 100%;

    // 配置面板
    .config-panel {
      margin-bottom: $spacing-md;

      .config-header {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
        font-weight: 500;
      }

      .config-controls {
        display: flex;
        gap: $spacing-md;
        flex-wrap: wrap;

        .config-item {
          display: flex;
          align-items: center;
          gap: $spacing-sm;

          .config-label {
            font-size: 0.875rem;
            color: var(--n-text-color-2);
            white-space: nowrap;
            min-width: 3rem;
          }
        }
      }
    }

    // 网格容器
    .grid-container {
      width: 100%;

      .grid-item {
        // 进场动画
        animation: fadeInUp 0.3s ease-out both;

        @for $i from 1 through 20 {
          &:nth-child(#{$i}) {
            animation-delay: #{$i * 0.05}s;
          }
        }

        .item-wrapper {
          padding: 0.25rem;
          border-radius: $border-radius;
          transition: $transition;

          &:hover {
            padding: 26px 10px 0  10px;
            background-color: var(--n-color-target);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }

          :deep(.n-form-item) {
            margin-bottom: 0;
          }
        }
      }
    }

    // 统计信息
    .grid-stats {
      margin-top: $spacing-md;
      opacity: 0.8;
      transition: opacity 0.2s;

      &:hover {
        opacity: 1;
      }
    }
  }

  // 动画定义
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  // 响应式设计 - 使用mixin减少重复
  @mixin mobile {
    @media (max-width: 768px) {
      @content;
    }
  }

  @mixin small-mobile {
    @media (max-width: 480px) {
      @content;
    }
  }

  .c-grid-layout {
    @include mobile {
      .config-panel .config-controls {
        flex-direction: column;
        gap: 0.75rem;

        .config-item {
          justify-content: space-between;
        }
      }

      .grid-container {
        :deep(.n-grid) {
          gap: $spacing-sm !important;
        }

        .grid-item .item-wrapper {
          padding: 0.125rem;
        }
      }

      .grid-stats {
        margin-top: 0.75rem;
        font-size: 0.875rem;
      }
    }

    @include small-mobile {
      .config-panel {
        margin-bottom: 0.75rem;
      }
    }
  }

  // 主题适配
  :deep(.n-card) {
    --n-border-radius: 8px;
  }

  :deep(.n-input-number) {
    --n-width: 80px;
  }

  // 暗色主题
  @media (prefers-color-scheme: dark) {
    .c-grid-layout .grid-container .grid-item .item-wrapper:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }